import React from "react";
import {fetchNews,fetchGoods} from "../actions/home";
import {connect} from "react-redux";

class Home extends React.Component{
    componentDidMount(){
        this.props.fetchNews(1,5);
        this.props.fetchGoods(1,8);
    }
    render () {
        var data = this.props.news.rows;
        var goods = this.props.goods.rows;
        var newsData = [];
        var goodsData = [];
        if(data){
            for(var i=0;i<3;i++){
                var filename = "http://127.0.0.1:3000/"+data[i].thumb[0].filename;
                var news = <div className="col-sm-6 col-md-4">
                                <div className="thumbnail">
                                    <img  src={filename}/>
                                    <div className="caption">
                                        <h3>{data[i].title}</h3>
                                        <p className="contentMain" dangerouslySetInnerHTML={{__html:data[i].content}}></p>
                                        <p>作者：{data[i].author}</p>
                                    </div>
                                </div>
                            </div>
                newsData.push(news)
            }
        }
        if(goods){
            for(let i=0;i<3;i++){
                var filename = "http://127.0.0.1:3000/"+goods[i].thumb[0].filename;
                var gos = <div className="col-sm-6 col-md-4">
                                <div className="thumbnail">
                                    <img className="goodsImg" src={filename}/>
                                    <div className="caption">
                                        <h3>{goods[i].title}</h3>
                                        <p className="contentMain">{goods[i].content}</p>
                                        <p>品牌：{goods[i].brand}</p>
                                        <p>价格：{goods[i]._price}</p>
                                    </div>
                                </div>
                            </div>
                goodsData.push(gos)
            }
        }
        return (
            <div>
                {/* banner */}
                <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
                    <ol className="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1" className=""></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2" className=""></li>
                    </ol>
                    <div className="carousel-inner" role="listbox">
                        <div className="item active">
                        <img src="../img/banner1.jpg"/>
                        </div>
                        <div className="item">
                        <img src="../img/banner2.jpg"/>
                        </div>
                        <div className="item">
                        <img src="../img/banner3.png" />
                        </div>
                    </div>
                    <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span className="sr-only">Previous</span>
                    </a>
                    <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span className="sr-only">Next</span>
                    </a>
                </div>
                {/* 最新新闻 */}
                <div className="page-header ">
                    <div className="pull-left color_gray_01">
                        <strong>最新新闻</strong>
                    </div> 
                    <div className="pull-right">
                        <a href="#" title="最新新闻">查看更多&gt;&gt;</a>
                    </div>
                    <div className="clearfix"></div>
                </div>
                <div className="autoAll row">
                    {newsData}
                </div>
                {/* 最新产品 */}
                <div className="page-header ">
                    <div className="pull-left color_gray_01">
                        <strong>最新产品</strong>
                    </div> 
                    <div className="pull-right">
                        <a href="#" title="最新新闻">查看更多&gt;&gt;</a>
                    </div>
                    <div className="clearfix"></div>
                </div>
                <div className="autoAll row">
                    {goodsData}
                </div>
                
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        news:state.home.news,
        goods:state.home.goods
    }
}

const NewHome = connect(
    mapStateToProps,
    {fetchNews,fetchGoods},

)(Home);
module.exports = NewHome;